<template>
 <el-main >
    <!-- 搜索栏 -->
     <el-form :model="searchParm"  :inline="true" size="normal">
        <el-form-item >
            <el-input placeholder="请输入关键字" v-model="searchParm.roleName" ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button icon="Search" @click="searchBtn">搜索</el-button>
            <el-button icon="Close" type="danger" plain @click="resetBtn">重置</el-button>
            <el-button v-permission="['sys:role:add']" icon="Plus" type="primary" @click="addBtn">新增</el-button>     
        </el-form-item>
     </el-form>
     <!-- 表格数据 -->
      <el-table :height="tableHeight" :data="tableList" border stripe>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="remark" label="角色备注"></el-table-column>
        <el-table-column  label="操作" width="320px" align="center">
            <template #default="scope" >
            <el-button v-permission="['sys:role:edit']" icon="Edit" size="default" type="primary" @click="editBtn(scope.row)">编辑</el-button>
            <el-button v-permission="['sys:role:assign']" icon="Edit" size="default" type="success" @click="assignBtn(scope.row)">分配菜单</el-button>
            <el-button v-permission="['sys:role:delete']" icon="Delete" size="default" type="danger" @click="deleteBtn(scope.row.roleId)">删除</el-button>   
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
       <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="searchParm.currentPage"
        :page-sizes="[10 ,20, 40, 80, 100]"
        :page-size="searchParm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchParm.total" background>
        
       </el-pagination>
       
      
     <!-- 新增编辑弹框 -->
     <SysDialog
        :visible="dialog.visible"
        :title="dialog.title"
        :width="dialog.width"
        :height="dialog.height"
        @on-close="onClose"
        @on-confirm="commit"
        >
        <!-- 弹框内容 -->
        <template v-slot:content>
         <el-form 
         :model="addModel" 
         ref="addRef" 
         :rules="rules" 
         label-width="80px" 
         :inline="false" 
         size="normal"
         >
            <el-form-item prop="roleName" label="角色名称">
                <el-input v-model="addModel.roleName"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
                <el-input v-model="addModel.remark"></el-input>
            </el-form-item>
           
         </el-form>
         
        </template>
        </SysDialog> 
        <!-- 分配菜单 -->
        <AssignTree ref="assignTree"></AssignTree>
 </el-main>
 
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import SysDialog from '../../components/SysDialog.vue';
import useDialog from '../../hooks/useDialog';
import { ElMessage, type FormInstance } from 'element-plus';
import { addApi,getApi,editApi,deleteApi } from '../../api/role/index.ts'
import { onMounted } from 'vue';
import type { SysRole } from '../../api/role/RoleModel';
import { nextTick } from 'vue';
import useInstance from '../../hooks/useInstance';
import AssignTree from './AssignTree.vue';

//菜单树的ref属性
const assignTree = ref()
//获取全局的global
const {global} = useInstance()
//表单属性
const addRef = ref<FormInstance>();
//表单验证规则
const rules = {
     roleName:[
        {
            required:true,
            message:"请输入角色名称",
            trigger:"change",
        }
     ]
}
//弹框属性
const {dialog,onClose,onShow} = useDialog()
//表单绑定对象
const searchParm = reactive({
    currentPage:1,
    pageSize:10,
    roleName:'',
    total:0
})
//表格高度
const tableHeight = ref(0)
//新增
const addBtn =() =>{
    tags.value = '0'
    dialog.title = '新增'
    dialog.height =180
    onShow()
    //清空表单
    addRef.value?.resetFields()
}
//新增表单对象
const addModel = reactive({
    roleId:'',
    roleName:'',
    remark:''
})
//页数改变时
const sizeChange = (size:number)=>{
    searchParm.pageSize = size;
    getList()
}
//页数改变时触发
const currentChange =(page:number)=>{
    searchParm.currentPage = page;
    getList()

}
//判断新增还是编辑
const tags = ref('')
//表单提交
const commit = async ()=>{
    
    addRef.value?.validate(async(valid)=>{
        if(valid){
            console.log('表单验证通过')
            //提交请求
            let res = null
            if(tags.value == '0'){
                 res = await addApi(addModel)
            }else{
                 res = await editApi(addModel)
            }
            if(res && res.code == 200){
                ElMessage.success(res.msg)
                //刷新列表
                getList()
                //关闭
                onClose()

            }
        }
    })
}
//表格数据
const tableList = ref([])
//查询列表
const getList =async()=>{
    let res = await getApi(searchParm)
    if(res && res.code == 200){
                console.log(res.data)
                tableList.value = res.data.records
                //分页总条数
                searchParm.total = res.data.total

          }
}
const searchBtn =() =>{
 getList()
}
const resetBtn =() =>{
  searchParm.roleName = ''
  searchParm.currentPage = 1
  getList()
}
const editBtn=(row:SysRole)=>{
    tags.value = '1'
    console.log(row)
    //显示弹框
    dialog.visible = true
    dialog.title = '编辑'
    dialog.height = 280
    //数据回显
    nextTick(()=>{
        Object.assign(addModel,row)
    })
    //清空表单
     addRef.value?.resetFields()
}
const deleteBtn=async(roleId:string)=>{
  console.log(roleId)
  console.log(global)
  const confirm = await global.$myconfirm('是否要删除该角色')
  console.log(confirm)
  if(confirm){
    let res = await deleteApi(roleId)
    if(res && res.code == 200){
        ElMessage.success(res.msg)
        //刷新列表
        getList()
    }
    
  }
}
const assignBtn = (row:SysRole)=>{
    
    assignTree.value.show(row.roleId,row.roleName)

}
onMounted(()=>{
nextTick(()=>{
tableHeight.value = window.innerHeight - 230
});
getList();
})
</script>

<style lang="scss" scoped>

</style>